<template>
  <a-form-model-item
      labelAlign="left"
      :label="widget.name"
      :prop="widget.model"
      :label-col="{ span: widget.options.labelCol }"
      :wrapper-col="{ span: widget.options.wrapperCol }"
      :style="{width: widget.options.width}"
    >
      <template v-if="widget.type == 'input'">
        <a-input
          v-model="dataModel"
          :placeholder="widget.options.placeholder"
          :disabled="widget.options.disabled"
          size="small"
        />
      </template>
      <template v-if="widget.type == 'textarea'">
        <a-textarea
          v-model="dataModel"
          :placeholder="widget.options.placeholder"
          :disabled="widget.options.disabled"
          :rows="widget.options.rows"
          size="small"
        />
      </template>
      <template v-if="widget.type == 'radio'">
        <a-radio-group v-model="dataModel" :disabled="widget.options.disabled">
          <a-radio v-for="(opt, index) in widget.options.options" :value="opt.value" :key="opt.value + index">
            {{opt.label}}
          </a-radio>
        </a-radio-group>
      </template>
      <template v-if="widget.type == 'checkbox'">
        <a-checkbox-group v-model="dataModel" :disabled="widget.options.disabled">
          <a-checkbox v-for="(opt, index) in widget.options.options" :value="opt.value" :key="opt.value + index">
            {{opt.label}}
          </a-checkbox>
        </a-checkbox-group>
      </template>
    </a-form-model-item>
</template>

<script>
export default {
  name: 'GenerateFormItem',
  props: ['widget', 'models'],
  data(){
    return {
      dataModel: this.models[this.widget.model],
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val,
        });
        this.$emit('change', this.widget.model, val);
      },
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val[this.widget.model];
      },
    }
  }
}
</script>

<style>

</style>
